<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>源辰-新闻类型管理</title>
<link rel="shortcut icon" href="../../images/copylogo.png" type="image/x-icon" />
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="forms" class="mt10">
	<div class="box">
		<div class="box_border">
			<div class="box_center">
				博文类型名称：<input type="text" id="tname" name="tname" class="input-text lh30" size="40"/>&nbsp;&nbsp;
				<input type="button" name="button" class="btn btn82 btn_save2" onclick="addTypeInfo()" value="添加"/>&nbsp;&nbsp;
				<span id="msg"></span>
			</div>
		</div>
	</div>
</div>

<div id="table" class="mt10">
	<div class="box span10 oh">
		<table width="100%" border="0" cellpadding="0" cellspacing="0" class="list_table">
			<thead>
				<tr>
					<th width="30%">博文类型编号</th>
                   	<th>博文类型名称</th>
                   	<th>状态</th>
                   	<th>操作</th>
                </tr>
             </thead>
             <tbody id="type_info" align="center">
				 
             </tbody>
		</table>
        <div class="page mt10">
		<div class="pagination">
            <ul id = "pagination">
            </ul>
		</div>
        </div>
	</div>
</div>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
var page = 1;
var rows = 4;
var totalPage = 1;

$(function(){
	$("#tname").focus(function(){
		$("#tname").text("");
	})
	
	findByFirst();
})

function findByFirst(){
	$.post("../../type",{op:"finds",page:page,rows:rows},data =>{
		totalPage = Math.ceil(data.total / rows);
		
		//查询页数
		showPage();
		
		//查询数据
		showData(data.rows);
	},"json");
}

function showPage(){
	var str = '<li class="active"><a href="javascript:void(0)" onclick="findByPage(this,1)">1</a></li>';
	for (var i = 2;i <= totalPage; i++){
		str +='<li><a href="javascript:void(0)" onclick="findByPage(this,' + i +')">' + i + '</a></li>';
	}
	$("#pagination").html("").append($(str));
}

//var statusStr = ["可用","不可用"];
function showData(data){
	var str = "";
	$.each(data,function(index,item){
		str += "<tr><td>" + item.tid + "</td><td>" + item.tname + "</td>";
		if(item.status == 1){
			str += "<td class='corr'>可用</td><td>";
			str += "<a class='err' href='javascript:void(0)' onclick='updateType(this," + item.tid + ",0)'>[下架]</a></td><tr>";
		}else{
			str += "<td class='red'>不可用</td><td>";
			str += "<a class='err' href='javascript:void(0)' onclick='updateType(this," + item.tid + ",1)'>[上架]</a></td><tr>";
		}
	})
	$("#type_info").html("").append($(str));
}

function findByPage(obj,flag){
	if(flag == page){
		return;
	}
	
	page = flag;
	$("#pagination li").removeClass("active");
	$("#pagination li").eq(flag - 1).addClass("active");
	
	$.post("../../type",{op:"findByPage",page:page,rows:rows},result => {
		showData(result);
	},"json");
}

function addTypeInfo(){
	var tname=$.trim( $("#tname").val() );
	if(tname == ""){
		$("#msg").css("color","red").text("请输入博文类型名称...");
		return;
	}
	
	$.post("../../type",{op:"add",tname:tname},result => {
		result = parseInt($.trim(result));
		
		if(result > 0){
			$("#msg").css("color","green").text("博文添加成功...");
			$("#tname").val("");
			findByFirst();
		}else{
			$("#msg").css("color","red").text("博文添加失败...");
		}
	},"text");
}
function updateType(obj,tid,status){
	$.post("../../type",{op:"update",tid:tid,status:status},result => {
		result = parseInt($.trim(result));
		if(result>0){
			if(status==1){
				$(obj).parent().prev('.err').text('可用').attr("class","corr");
				$(obj).attr("onclick","updateType(this,"+ tid +",0)").text("[下架]").attr("class","err");
			}else{
				$(obj).parent().prev('.corr').text('不可用').attr("class","err");
				$(obj).attr("onclick","updateType(this,"+ tid +",1)").text("[上架]").attr("class","corr");
			}
		} else{
			alert("博文类型修改失败...")
		}
	},"text");
}
</script>
</body>
</html>